<template>
    <div>

        <div id="zp" class="title">
            <h2>招聘职位</h2>
            <span class="line"></span>
        </div>
        <div class="job">
            <a :href="getHref({path:'/jobList',query:{id:item.id}})" @click.prevent="goPage('/jobList', item.id)" class="jobinfo" v-for="(item, index) in list" :key="index">
                <span>{{ item.name }}</span>
                <div>共{{ item.nums }}个职位</div>
                <div class="check">
                    查看
                </div>
            </a>
        </div>
        <div class="btn">
            <button @click="goPage('/jobList')">查看全部职位</button>
        </div>
        <div id="at" class="title title2">
            <h2>{{ options.zp_title }}</h2>
            <span class="line"></span>
        </div>
        <div class="job">
            <div v-html="options.zp_content"></div>
        </div>
    </div>
</template>

<script>

export default {

    data() {
        return {
            list: [],
            content: ''
        }
    },
    mounted() {
        this.getList()
    },
    computed: {
        options() {
            return this.$store.state.dataInfo
        },
    },
    methods: {
        getther(d) {
            console.log(d);
            this.$refs.page.scrollTo(d)
        },
        getHref(route) {
            const resolved = this.$router.resolve(route);
            return resolved.href;
        },
        getList() {
            this.$api.getAllCates().then(res => {
                if (res.code == 1) {
                    this.list = res.data.list
                }
            })
        },
        scrollTo(id) {
            console.log(id);
            const element = document.getElementById(id);
            if (element) {
                element.scrollIntoView();
            }
        },
        goPage(url, id) {
            console.log(url, id);

            this.$router.push({
                path: url, query: {
                    id
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.title {
    width: 100vw;
    scroll-margin-top: 80px;

    h2 {
        text-align: center;
        font-size: 25px;
        color: #B00D16;
    }

    .line {
        margin: 0 auto;
        display: block;
        width: 50px;
        background-color: #eeebeb;
        height: 2px;
    }
}

.title2 {
    scroll-margin-top: 80px;
    margin-top: 80px;
}

.btn {
    display: none;
}

.job {
    padding: 0 250px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
a{
    text-decoration: none;
}
    ::v-deep>div {
        img {
            max-width: 100%;
        }
    }

    .jobinfo {
        .check {
            display: none;
        }

        cursor: pointer;
        width: 300px;
        background-color: #dad7d7;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 200px;

        >span {
            font-size: 20px;
            margin-bottom: 15px;
            color: #555353;
        }

        div {
            padding: 5px 10px;
            background-color: #B00D16;
            color: #fff;
            border-radius: 3px;
            font-size: 13px;
        }
    }
}

@media screen and (max-width:768px) {
    .title h2 {
        font-size: 17px;
        line-height: 24px;
    }

    .title {
        scroll-margin-top: 13.969vw;
    }

    .title2 {
        scroll-margin-top: 13.969vw;
        margin-top: 60px;
    }

    .job {
        padding: 0 20px;

        .jobinfo {
            display: flex;
            height: auto;
            width: 100%;
            padding: 16px 25px;
            margin-bottom: 12px;
            border-radius: 5px;
            position: relative;
            justify-content: center;
            align-items: flex-start;

            .check {
                padding: 5px 14px;
                border-width: 1px;
                border-style: solid;
                font-size: 11px;
                line-height: 16px;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                border-radius: 2px;
                display: block;
                position: absolute;
                right: 20px;
                color: #B00D16;
            }

            span {
                font-size: 14px;
            }

            div {
                font-size: 12px;
                background-color: transparent;
                color: #3a3939;
            }
        }
    }

    .btn {
        display: block;
        text-align: center;

        button {
            display: inline-block;
            padding: 6px 23px;
            line-height: 18px;
            border-width: 1px;
            border-style: solid;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            font-size: 13px;
            color: #B00D16;
            border-color: #B00D16;
        }
    }
}
</style>